<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    size="50%"
    :with-header="false"
    :width="700"
  >
    <div class="drawer_box">
      <div class="drawer_title">
        <div class="drawer_t">
          <div class="drawer_t_l">
            <img
              class="drawer_t_l_img"
              src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
              alt=""
            />
            评价详情
          </div>
          <img
            class="drawer_t_r"
            src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
            alt=""
            @click="drawer = false"
          />
        </div>
      </div>
      <div class="drawer_content">
        <div class="content-box">
          <div class="label">买家：</div>
          <div class="desc">{{ messageList.CreateUserID }}</div>
        </div>
        <div class="content-box">
          <div class="label">评价时间：</div>
          <div class="desc">{{ messageList.CreateTime }}</div>
        </div>
        <div class="content-box">
          <div class="label">所属权益：</div>
          <div class="desc">{{ messageList.EquityName }}</div>
        </div>
        <div class="full-line"></div>
        <div class="content-box">
          <div class="label">评价内容：</div>
          <div class="desc">{{ messageList.Content }}</div>
        </div>
        <div class="content-box">
          <div class="label">评价图片：</div>
          <div class="desc">
            <img
              class="desc-img"
              :src="item.url"
              alt=""
              v-for="(item, index) in imgsUrl"
              :key="index"
            />
          </div>
        </div>
        <div class="content-box">
          <div class="label">评价星级：</div>
          <div class="desc">{{ messageList.UserScore }}</div>
        </div>
        <div class="full-line"></div>
        <div class="content-box">
          <div class="label">所属产品：</div>
          <div class="desc">{{ catList.Name }}</div>
        </div>
        <div class="content-box">
          <div class="label">订单编号：</div>
          <div class="desc">{{ catList.Code }}</div>
        </div>
        <div class="content-box">
          <div class="label">购买时间：</div>
          <div class="desc">{{ catList.CreateTime }}</div>
        </div>
        <div class="content-box">
          <div class="label">核销时间：</div>
          <div class="desc">{{ catList.VerificeTime }}</div>
        </div>
        <div class="content-box">
          <div class="label">购买数量：</div>
          <div class="desc">{{ catList.Quantity }}</div>
        </div>
        <div class="content-box">
          <div class="label">下单金额：</div>
          <div class="desc">{{ catList.TotalPrice }}</div>
        </div>
        <div class="content-box">
          <div class="label">购买渠道：</div>
          <div class="desc">{{ catList.ChannelID }}</div>
        </div>
        <div class="content-box">
          <div class="label">卖家：</div>
          <div class="desc">{{ catList.PurchaseCompanyName }}</div>
        </div>
        <div class="content-box">
          <div class="label">服务方：</div>
          <div class="desc">{{ catList.ServiceCompanyName }}</div>
        </div>
      </div>
      <div class="drawer_footer">
        <button v-if="messageList.IsAudit != '是'" class="footer-btn" @click="ShowComments(1)">展示评论</button>
        <button v-else class="footer-btn" @click="ShowComments(0)">撤销评论</button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "cat_dialog",
  props: {
    messageList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      catList: {},

      tabID: 2
    };
  },
  mounted() {},
  created() {},
  watch: {
    drawer(newMessage, oldMessage) {
      if (newMessage) {
        this.getCatList();
      }
    }
  },
  computed: {
    imgsUrl() {
      try {
        return JSON.parse(this.messageList.PhotoPath);
      } catch (e) {
        console.log(e);
        return [];
      }
    }
  },
  methods: {
    ShowComments(status) {
      this.drawer = false;
      this.$emit("husbandEvent", {
        id: this.messageList.ID,
        IsAudit: status
      });
    },
    drawerOp() {
      this.drawer = true;
    },
    getCatList() {
      let o = this;
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: "1258",
          cellData: [
            { name: "ChannelID" }, // 购买渠道
            { name: "Code" }, // 订单编号
            { name: "CreateTime" }, // 购买时间
            { name: "Name" }, // 产品名称
            { name: "PurchaseCompanyName" }, // 卖家
            { name: "Quantity" }, // 购买数量
            { name: "ServiceCompanyName" }, // 服务方
            { name: "TotalPrice" }, // 下单金额（元）
            { name: "VerificeTime" } // 核销时间
          ],
          paramData: {
            Code: this.messageList.Code,
            ID:this.messageList.PurchaseID
          }
        },
        function(data) {
          if (data.status.code == 200) {
            o.catList = data.content.queryData[0];
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    }
  }
};
</script>
<style scoped>
.drawer_footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.drawer_footer .footer-btn {
  line-height: 4rem;
  background-color: #f78c51;
  color: #fff;
  margin: 0 1rem;
  padding: 0 3rem;
  border-radius: 0.5rem;
  cursor: pointer;
  border: none;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin-top: 1rem;
  padding: 0 3rem;
  display: flex;
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 11rem);
  padding: 0 3rem;
  width: 100%;
  padding-bottom: 1rem;
}

.drawer_content .title {
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_content .driver-title {
  margin-top: 1em;
}

.full-line {
  margin: 2rem auto;
  width: 95%;
  height: 1px;
  background-color: #333;
}

.content-box {
  display: flex;
  align-items: center;
  margin: 2rem 0 2rem 2em;
}

.mt-10 {
  margin-top: 10rem;
}

.content-box .label {
  width: 25%;
  font-size: 1.6rem;
}

.content-box .desc {
  flex: 1;
  font-size: 1.6rem;
}

.content-box .desc .desc-img {
  width: 14rem;
  height: 14rem;
  border-radius: 1rem;
  display: inline-block;
  margin-right: 1rem;
  object-fit: cover;
}
</style>
